<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
		<script src="js/vue.js"></script>
		<script src="js/axios-0.18.0.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<script src="js/server.js"></script>
		<style type="text/css">
			.login-form {
				width: 450px;
				height: 220px;
				border: 1px solid #DCDFE6;
				border-radius: 5px;
				box-shadow: 0 0 25px #909399;
				margin: 150px auto;
				padding: 35px 35px 15px 35px;
			}

			.login-title {
				text-align: center;
				margin: 0 auto 10px auto;
				color: #303133;
			}
		</style>

	</head>
	<body>
		<div id="div">
			<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="login-form">
				<h3 class="login-title">超市账单管理系统</h3>
				<el-form-item label="账号" prop="userCode">
					<el-input v-model="loginForm.userCode"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="loginForm.password"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
					<el-button @click="resetForm('loginForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</body>

	<script type="application/javascript">
		var vm = new Vue({
			el: "#div",
			data: {
				loginForm: {
					userCode:"",
					password:""
				},
				rules: {
					userCode: [{
						required: true,
						message: '请输入账号名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			},
			methods: {
				submitForm(formName) {
					//formName 对应表单属性 ref="loginForm"
					this.$refs[formName].validate((valid) => {
						if (valid) {
							axios.post(
									server_url + "/user/login",
									"&userCode=" + this.loginForm.userCode +
									"&passWord=" + this.loginForm.password
							).then(resp=>{
								console.log(resp.data);
								if(resp.data.flag){
									//登录成功
									//将登录用户存储到localStorage中 - 存入的value值必须是字符串,并且是json字符串
									localStorage.setItem("loginUser", JSON.stringify(resp.data.data));
									//跳转到主页
									window.location.href = "index.html";
								}else{
									this.$message.error(resp.data.message);
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					});
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>